<template>
  <div class="goods wrapper">
    <div class="title">
      <div class="left">
        <h3>宋朝服饰</h3>
        <p>华而不奢 清新脱俗</p>
      </div>
      <div class="right">
        <a href="#" class="more">
          查看全部<span class="iconfont icon-arrow-right-bold"></span>
        </a>
      </div>
    </div>
    <div class="bd">
      <ul>
        <li class="goods-item">
          <a href="#">
            <div class="pic">
              <img
                style="width: 304px; height: 304px;"
                src="https://tse4-mm.cn.bing.net/th/id/OIP-C.ySbVB30YaEGPV4mWWeDoQAHaFj?w=259&h=195&c=7&r=0&o=5&dpr=2&pid=1.7"
                alt=""
              />
            </div>
            <div class="txt" style="font-size: 20px;font-weight: bold;">
              <h4>宋朝贵妇服饰</h4>
            </div>
          </a>
        </li>
        <li class="goods-item">
          <a href="#">
            <div class="pic">
              <img
                style="width: 304px; height: 304px;"
                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.0UKnOB_6mA41rqhclaBxPQHaFj?w=260&h=195&c=7&r=0&o=5&dpr=2&pid=1.7"
                alt=""
              />
            </div>
            <div class="txt" style="font-size: 20px;font-weight: bold;">
              <h4>宋朝官员服饰</h4>
            </div>
          </a>
        </li>
        <li class="goods-item">
          <a href="#">
            <div class="pic">
              <img style="width: 304px;height: 304px;" src="" alt="" />
            </div>
            <div class="txt" style="font-size: 20px;font-weight: bold;">
              <h4>宋朝女子服饰</h4>
            </div>
          </a>
        </li>
        <li class="goods-item">
          <a href="#">
            <div class="pic">
              <img
                style="width: 304px; height: 304px;"
                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qmZ57CCCngwSYkfKp6vR7wHaFj?w=260&h=195&c=7&r=0&o=5&dpr=2&pid=1.7"
                alt=""
              />
            </div>
            <div class="txt" style="font-size: 20px;font-weight: bold;">
              <h4>宋朝服饰-襦裙</h4>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.goods .bd ul {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 0;
  margin: 0;
}

.goods-item {
  width: 304px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.goods-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.goods-item .pic img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
}

.goods-item:hover .pic img {
  transform: scale(1.1);
}

.goods-item .txt {
  margin-top: 15px;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s forwards 0.2s;
}

.goods-item:hover .txt {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.title h3 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.title p {
  color: #666;
}

.right .more {
  font-size: 16px;
  color: #0099cc;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s;
}

.right .more:hover {
  color: #0077b3;
}

.right .iconfont {
  margin-left: 5px;
  font-size: 16px;
}
</style>